<template>
	<view class="container">
		<image class="avatar" src="https://api.gmit.vip/Api/QcImg?format=image" mode="aspectFill"></image>
		<text class="username">{{$t('姓名')}}</text>
		<text class="email">{{$t('用户名')}}</text>
		<text class="email">{{$t('性别')}}:{{$t('男')}}</text><button class="logout-button"
			@click="switchLang">{{$t('切换语言')}}{{applicationLocale == 'en'?$t('英文'):$t('中文')}}</button>
		<button class="edit-button">{{$t('个人信息')}}</button>
		<button class="logout-button">{{$t('关于我们')}}</button>
		<button class="logout-button">{{$t('安全设置')}}</button>
		<view class="view-list">
			<view>{{$t('当前版本')}}V_1.0.1</view>
			<view>{{$t('隐私声明')}}</view>
			<view>{{$t('服务条款')}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applicationLocale: "zh-Hans",
			};
		},
		onShow() {
			this.initLangeage()
		},
		methods: {
			switchLang() {
				uni.showModal({
					title: this.$t('切换语言'),
					content: `${this.applicationLocale == 'en' ? this.$t('切换中文') : this.$t('切换英文')}`,
					confirmText: this.$t('确定'),
					cancelText: this.$t('取消'),
					success: res => {
						if (res.confirm) {
							this.$i18n.locale = this.$i18n.locale == 'en' ? 'zh-Hans' : 'en';
							uni.onLocaleChange((e) => {
								this.applicationLocale = e.locale;
							})
							uni.setStorageSync('Uni-LocaleMessages', this.$i18n.locale)
							uni.setLocale(this.$i18n.locale);
							this.initLangeage()
							// #ifdef APP-PLUS
							plus.runtime.restart(); //重启当前应用（原生Api才生效）
							// #endif
						}
					}
				});
			},
			initLangeage() {
				uni.setNavigationBarTitle({
					title: this.$t('我的')
				})
				uni.setTabBarItem({
					index: 0,
					text: this.$t('首页'),
				})
				uni.setTabBarItem({
					index: 1,
					text: this.$t('我的'),
				})
			}
		},
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.avatar {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		margin-bottom: 20px;
	}

	.username {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.email {
		font-size: 16px;
		color: #999;
		margin-bottom: 20px;
	}

	.edit-button,
	.logout-button {
		background-color: #007aff;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		margin-bottom: 10px;
	}
</style>